<template>
  <div class="row" :style="rowStyle" :class="rowClass">
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: "HaiRow",
    props: {
      gutter: {
        type: [Number, String]
      },
      align: {
        type: String,
        validator(value) {
          return ['left', 'right', 'center'].indexOf(value) >= 0
        }
      },
      auto: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      rowStyle() {
        return {
          marginLeft: -this.gutter / 2 + 'px',
          marginRight: -this.gutter / 2 + 'px'
        }
      },
      rowClass() {
        let {align, auto} = this
        return {
          [`align-${align}`]: align,
          'auto': auto
        }
      }
    },
    mounted() {
      this.$children.forEach((vm) => {
        vm.gutter = this.gutter
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/assets/styles/default.scss";
  .row {
    display: flex;
    flex-wrap: wrap;
    &.auto {
      flex-wrap: nowrap;
    }
    &.align-left {
      justify-content: flex-start;
    }
    &.align-right {
      justify-content: flex-end;
    }
    &.align-center {
      justify-content: center;
    }
  }
</style>